
<template>
<div>
  
  <comp-header :user="user"></comp-header>
  <div class="jumbotron">
    <div class="container">
      <h1 class="display-3">Hello, world!</h1>
      <span class="testA" >啊哈哈哈哈哈</span>
      <p>This is a template for a simple marketing or informational website. It includes a large callout called a jumbotron and three supporting pieces of content. Use it as a starting point to create something more unique.</p>
      <p><a class="btn btn-primary btn-lg" @click="jump" role="button">Learn more &raquo;</a></p>
    </div>
  </div>

  <div class="container">
    <!-- Example row of columns -->
    <div class="row">
      <div class="col-md-4" v-for="(b,i) in blogList">
        <h2>{{b.title}}</h2>
        <p class="h6">作者：{{b.userName}}</p>
        <p>{{b.content}} </p>
        <p><a class="btn btn-primary" @click="jump('comp-blog-detail',{id:b.id})" role="button">View details &raquo;</a></p>
      </div>
    </div>

    <hr>
    <footer>
      <p>&copy; Company 2017</p>
    </footer>
  </div> <!-- /container -->
</div>
</template>

<script>
import CompHeader from './header.vue'
import Swal from 'sweetalert'
function get(url, data={}){
  return new Promise(( resolve, reject ) => {
    if (!url) {  
      reject('No Url')  
      return  
    }
    $.ajax({
      url:url,
      type:'get',
      dataType:'JSON',
      data:data,
      success:res=>{
        resolve( res)  
      },
      error:err=>{
        reject(err)
      }
    })
  })
}
export default {
  data:function () {
    this.getBlogList()
    return {
      msg: 'Hello world!',
      blogList:[],
      user:{}
    }
  },
  components:{
    CompHeader
  },
  mounted:async function(){
    const user = await get('/users/info')
    this.user=user
  },
  methods:{
    getBlogList:async function (){
      const res = await get('/publish/list')
      if(res.err==1){
        Swal('', res.msg, 'error')
        return 
      }
      this.blogList = res.blogList
    },
    jump: function (compName, data){
      this.$root.chgComp(compName, data)
    }
  }

}
</script>
